import { Space } from "antd";
import { useEffect, useState } from "react";
import { history } from "umi";
import "./index.less";
import { PaddingContent } from "@/components/page-padding";
import { CustomTitle } from "@/components/customTitle";
import { StyledAgree, StyledCancel } from "@/components/button";
import { List, Card } from "antd";
import { StyleViewDocument } from "@/components/common-styled";
import styled from "styled-components";

export const DownloadTemplate = styled(StyleViewDocument)`
  font-size: 16px;
  margin-left: 16px;
  &:hover {
    cursor: pointer;
  }
`;

const Identity = () => {
  const [myMap, setMyMap] = useState(new Map());
  // 在 useEffect 钩子中进行初始的设置
  useEffect(() => {
    setMyMap(
      new Map([
        ["home", "/"],
        ["verification", "/identity/verification"],
      ])
    );
  }, []);

  const toRedirect = (value: string) => {
    history.push(myMap.get(value));
  };

  return (
    <PaddingContent>
      <div className="identity">
        <CustomTitle>
          Identity Verification & License Plate Number Registration
        </CustomTitle>
        <div className="identity-content">
          <div className="top-img" />
          <div className="top-text">Identity Verification Required</div>
          <div className="middle-text">
            <Card
              bordered={false}
              className="verify-identity"
              title="To verify your identity, you will need to prepare following:"
            >
              <List split={false} className="verify-identity-list">
                <List.Item>
                  <span className="dot">•</span>Registered local mobile with
                  OTP-capable
                </List.Item>
                <List.Item>
                  <span className="dot">•</span>Documents Upload: ARA Permit /
                  Company Staff Card / Airport Staff Octopus Card / Crew Member
                  Certificate
                </List.Item>
              </List>
            </Card>
            <Card
              bordered={false}
              bodyStyle={{ borderBottom: "0" }}
              className="register-license"
              title="To register License Plate Number, you will need to prepare
              following:"
            >
              <List split={false} className="register-license-list">
                <List.Item>
                  <span className="dot">•</span>Vehicle Registration Document
                  Upload
                </List.Item>

                <List.Item>
                  <span className="dot">•</span>DPP Permit if applicable
                </List.Item>
                <List.Item>
                  <span className="dot">•</span>Authorization Letter if
                  applicable
                  <DownloadTemplate>
                    Download Authorization Letter Template
                  </DownloadTemplate>
                </List.Item>
              </List>
            </Card>
          </div>
          <Space size={"middle"}>
            <StyledCancel
              onClick={() => toRedirect("home")}
              type="default"
              size={"middle"}
            >
              Verify Later
            </StyledCancel>
            <StyledAgree
              onClick={() => toRedirect("verification")}
              type="default"
              size={"middle"}
            >
              Verify Identity
            </StyledAgree>
          </Space>
        </div>
      </div>
    </PaddingContent>
  );
};

export default Identity;
